<template>
    <div class="border-box">
        <div class="bold border-bottom title-box">当前订单</div>
        <div class="details">
            <div class="flex">
                <div class="gc-grey pd-t-12">公司：</div>
                <div>{{ orderInfo?.companyName }}</div>
            </div>
            <div class="flex mg-t-12">
                <div class="gc-grey">当前团队账户到期时间：</div>
                <div>{{ orderInfo?.accountExpireTime }}</div>
            </div>
            <div class="flex mg-t-12 flex-ai-c">
                <div class="gc-grey">当前已有席位数：</div>
                <div class="fc-primary pointer" @click="isShowRecord = true">{{ orderInfo?.hasSeat }}（已用{{ orderInfo?.useSeat }}）</div>
                <div v-if="orderInfo?.expireSeatsCount > 0" class="flex shadow-box flex-ai-c">
                    <el-icon class="fc-orange mg-r-5"><Warning /></el-icon>
                    检测到您有<span class="fc-orange">{{ orderInfo?.expireSeatsCount }}个</span>席位即将到期
                </div>
            </div>
            <el-button size="mini" class="mg-t-16 mg-b-20" type="primary" @click="isShowRecharge=true">续费</el-button>
        </div>
    </div>
    <dialogRecharge v-model:show="isShowRecharge" no-need-router @refresh="refresh" @changeTab="handleChangeTab"/>
    <dialogSeatDetails v-model:show="isShowRecord" :hasSeat="orderInfo?.hasSeat" :useSeat="orderInfo?.useSeat" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import dialogRecharge from '@/components/seat/dialog-recharge.vue';
import dialogSeatDetails from '@/components/seat/dialog-seat-details.vue';
import { getCompanySeatInfo } from '@/api/recharge-record';
import dayjs from 'dayjs';
const curDay = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
const expireDay = dayjs().add(30, 'day').format('YYYY-MM-DD') + ' 23:59:59'

console.log(expireDay);

export default defineComponent({
    data() {
        return {
            isShowRecharge: false,
            isShowRecord: false,
            orderInfo: {} as any
        }
    },
    components: {
        dialogRecharge,
        dialogSeatDetails
    },
    emits: ['refresh', 'changeTab'],
    methods: {
        getData() {
            getCompanySeatInfo({
                pageNum: 1,
                pageSize: 10
            }).then(res=> {
                this.orderInfo = res || {}
            })
        },
        refresh() {
            this.getData()
            this.$emit('refresh')
        },
        handleChangeTab(ev: string) {
            console.log(11111, ev);
            this.$emit('changeTab', ev)
        }
    },
    mounted() {
        this.getData()
    }
})
</script>
<style lang="stylus" scoped>
.border-box
    background #fff
    padding-left 20px
    border-radius 8px
    border 1px solid #DFE0EB
.title-box
    padding-top 24px
    padding-bottom  16px
.border-bottom
    border-bottom 1px solid #DFE0EB
.shadow-box
    background rgba(255, 118, 66, 0.1)
    padding 7px 10px
    border-radius 15px 5px 5px 0
.details
    padding-top 12px
    background url('../../assets/recharge/bg.png') no-repeat
    background-size cover
</style>